<template>
    <el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit" style="margin:20px;width:60%;min-width:600px;">
        <el-form-item label="图片">
            <el-upload :http-request="UploadFile"
                       :multiple="true"
                       class="upload-demo" action="">
                <el-button size="small" type="primary" :loading="isLoading">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                <div><img :src="form.imgUrl" style="width:70px;height:auto;"></div>
            </el-upload>
        </el-form-item>
        <el-form-item label="类型">
            <el-radio-group v-model="form.type">
                <el-radio label="0">小程序内部跳转</el-radio>
                <el-radio label="1">webview跳转</el-radio>
                <el-radio label="2">其他小程序跳转</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
            <el-input type="text" v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="图片描述">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            <el-button @click.native.prevent>取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    import {client} from '../../api/upload'
    import {addBanner} from '../../api/api'
    export default {
        data() {
            return {
                form: {
                    imgUrl: '',//图片地址
                    type:[{required:true,message:'请选择类型',trigger: 'blur'}],//图片跳转类型
                    desc: '',//图片描述
                    sort:'',//排序
                },
                isLoading:false,
                addLoading:false
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            UploadFile(file){
                this.isLoading=true;
                console.log("图片参数",file.file.uid);
                let fileName = 'banner'+'/'+   file.file.uid;//文件名称
                client().put(fileName,file.file).then(result=>{
                    this.form.imgUrl=result.url;
                    this.isLoading=false;
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                })
            },
            addSubmit(){
               this.$refs.form.validate((valid)=>{
                   if(valid){
                       this.$confirm('确认添加吗？','提示',{}).then(()=>{
                          this.addLoading=true;
                          let banner = Object.assign({},this.form);
                          let params = new URLSearchParams();
                          params.append("imgurl",banner.imgUrl);
                          params.append("type",banner.type);
                          params.append("content",banner.desc);
                          params.append("sort",banner.sort);
                          addBanner(params).then((res)=>{
                               this.addLoading=false;
                               if(res.code==200){
                                   this.$message({
                                       message:'添加成功',
                                       type:'success'
                                   });
                                   this.$refs['form'].resetFields();
                               }
                          }).catch(error=>{
                              this.addLoading = false;
                              if(error.data){
                                  this.$message({
                                      message:error.data.msg,
                                      type:'error'
                                  })
                              }else{
                                  this.$message({
                                      message:"服务器连接异常，请稍后....",
                                      type:'error'
                                  })
                              }
                          })
                       })
                   }
               })
            }
        }
    }
</script>